Membuat Aplikasi Kalkulator Web Javascript HTML

Pada kesempatan kali ini saya akan berbagi tutorial mengenai cara membuat aplikasi calculator dengan menggunakan javascript. Pembuatan aplikasi ini sangat mudah dan cara mengaksesnya adalah melalui web browser. Baik langsung saja, berikut adalah cara membuat aplikasi kalkukator berbasis website dengan menggunakan javascript.

Demo :

Caranya adalah sebagai berikut :

Cara 1 : Silahkan download CSS dan Library Javascript di bawah ini :
1. styles.css
2. script.js
3. Letakkan file styles.css dan script.js di folder yang sama dengan file index.html

Berikut adalah source code file index html (simpan dengan nama index.html) :

<html>
    <head>
		<link rel="stylesheet" type="text/css" href="styles.css">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
		<title>Aplikasi Kalkulator Simple</title>
	</head>
    <body>
        <div id="container">
            <div id="calculator">
                <div id="result">
                    <div id="history">
                        <p id="history-value"></p>
                    </div>
                    <div id="output">
                        <p id="output-values"></p>
                    </div>
                </div>
                <div id="keyboard">
                    <button class="operator" id="clear">C</button>
                    <button class="operator" id="backspace">CE</button>
                    <button class="operator" id="%">%</button>
					<button class="operator" id="/">&#247;</button>
					<button class="number" id="7">7</button>
					<button class="number" id="8">8</button>
					<button class="number" id="9">9</button>
					<button class="operator" id="*">&times;</button>
					<button class="number" id="4">4</button>
					<button class="number" id="5">5</button>
					<button class="number" id="6">6</button>
					<button class="operator" id="-">-</button>
					<button class="number" id="1">1</button>
					<button class="number" id="2">2</button>
					<button class="number" id="3">3</button>
					<button class="operator" id="+">+</button>
					<button class="empty" id="empty"></button>
					<button class="number" id="0">0</button>
					<button class="empty" id="empty"></button>
                    <button class="operator" id="=">=</button>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Nah. Bagaimana mudah bukan, cara membuat kalkulator berbasis website sendiri. Ini tidak membutuhkan cara apapun yang ribet. hanya membuat file saja.

Related posts